<template>
  <el-container>
    <Aside :isCollapse="isCollapse"></Aside>
    <el-container class="content">
      <!-- 头部 -->

      <el-header>
        <Header :isCollapse="isCollapse" @change="homeChange"></Header>
      </el-header>

      <!--  主体内容 -->

      <el-main>
        <Bread></Bread>

        <!--嵌套路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

import Header from '@/components/header.vue'

import Aside from '@/components/aside.vue'

import Bread from '@/components/bread.vue'

// import { useHomeUsers } from '@/views/home/home.js'

const isCollapse = ref(false)

const homeChange = (data) => {
  isCollapse.value = data
}

// const { pagenum,
//   pagesize,
//   query
// } = useHomeUsers()
</script>

<style lang="scss" scoped>
.el-header {
  width: 100%;

  background-color: #545c64;
}

.el-container {
  height: 100%;
}
</style>
